<template>
    <div class="management_container">
        <el-tabs v-model="state.activeName">
            <el-tab-pane v-for="{ name, label } in detailTabs" :label="label" :name="name" :key="name" />
        </el-tabs>
        <component :is="state.activeName === 'Market' ? Market : MyApplication" />
    </div>
</template>

<script setup>
import Market from './market.vue';
import MyApplication from './myApplication.vue';
import { reactive, inject, onUnmounted } from 'vue';

const detailTabs = [
    { name: 'Market', label: '应用市场' },
    { name: 'MyApplication', label: '我的应用' }
];
const bus = inject('bus');
const state = reactive({
    activeName: 'Market'
});

const onTabSwitch = (tab = 'MyApplication') => {
    state.activeName = tab;
};
bus.on('tabSwitch', onTabSwitch);

// 解绑事件
onUnmounted(() => {
    bus.off('tabSwitch');
});
</script>

<style lang="scss" scoped>
.management_container {
    .el-tabs {
        margin-bottom: 9px;
    }
}
</style>
